<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css过渡</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
        }
        div{
        width: 100px;
        height: 100px;
        background-color: orange;
        border-radius: 50%;
        }

        /*:hover===添加鼠标悬停的效果*/
        div:hover{
            /*
                box-shadow: 
                第一个值: 阴影的左右位置,正值在右,负值在左;
                第二个值: 阴影的上下位置,正值在下,负值在上;
                第三个值: 阴影的模糊距离,阴影边界的模糊距离
                第四个值: 阴影的长度尺寸;
                第五个值: 阴影的颜色;
                第六个值: 阴影的位置,inset是内部,outset是往外部,默认是outset.
            */
            box-shadow: 0 0 10px 30px lawngreen;
        }

        /*:active===添加元素激活(点击)的样式*/
        div:active{

            box-shadow: 0 0 10px 10px darkorchid;

            /*设置过渡属性.property属性.强调对哪个属性进行过渡*/
            transition-property: box-shadow;
            /*
            transition: 过渡.添加过渡样式.
            第一个值: 选择要过渡的属性;
            第二个值: 过渡的时间;
            */
            /*transition: box-shadow 1s;*/

            /*
            分步写法
            transition-duration: 设置过渡持续时间;
            */
            transition-duration: 2s;

            /*设置缓动函数
            linear: 匀速
            ease-in: 慢进效果
            ease-out: 慢出效果
            ease-in-out: 慢进慢出;
            */
            transition-timing-function: ease-in-out;

            /*transition-delay: 延迟过渡时间;*/
            transition-delay: 2s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>